<template>
  <div class="m-set_img_panel" v-show="visible" @click.self="cancel">
    <div class="wrap" :style="{ top: wrapTop, left: wrapLeft }">
      <div class="btn-close" @click="cancel"
        ><t-icon name="clear" size="14px"></t-icon
      ></div>

      <div class="menu-btns" v-show="step === 'menu'">
        <t-button
          class="tr-button-default menu-btn"
          @click="watchBigImg"
          label="查看大图"
        />
        <t-button
          class="tr-button-default menu-btn"
          @click="step = 'set'"
          label="图片设置"
        />
      </div>

      <div v-show="step === 'set'">
        <!-- <t-input v-model="src" label="图片地址" labelPosition="top"></t-input> -->
        <t-input
          v-model="width"
          label="图片宽度"
          labelPosition="top"
          placeholder="例：100px、100%"
          @keyup.key.enter="confirm"
        ></t-input>
        <t-input
          v-model="height"
          label="图片高度"
          placeholder="例：100px，为空自适应高度"
          labelPosition="top"
          @keyup.key.enter="confirm"
        ></t-input>

        <div class="operate">
          <t-button class="tr-button-default" @click="cancel" label="取消" />
          <t-button class="tr-button-primary" @click="confirm" label="确认" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup type="typescript">
import { computed, onMounted, useAttrs, ref, watch, reactive } from 'vue';

import TInput from 't/basic/input/Component';
import TButton from 't/basic/button/Component';
import TIcon from 't/basic/icon/Component';

import base64ToUrl from '../base64ToUrl';

let showReslove = () => { };

const visible = ref(false);

// menu操作菜单 set设置图片信息
const step = ref('menu');

const src = ref('');
const width = ref('');
const height = ref('');

const wrapTop = ref('50%');
const wrapLeft = ref('50%');

// 计算wrap的最佳位置
function setWrapTopAndLeft(target) {
	const { offsetLeft, offsetTop, clientWidth, clientHeight, offsetParent } = target;
	const normalTop = (offsetTop + clientHeight / 2);
	const normalLeft = (offsetLeft + clientWidth / 2);
	const minTop = 100;
	const minLeft = 120;
	const maxLeft = offsetParent?.clientWidth - minLeft;
	const maxTop = offsetParent?.clientHeight - minTop;
	wrapTop.value = Math.min(Math.max(normalTop, minTop), maxTop) + 'px';
	wrapLeft.value = Math.min(Math.max(normalLeft, minLeft), maxLeft) + 'px';
}

function show(target, s, w, h) {
	setWrapTopAndLeft(target);

	step.value = 'menu';
	src.value = s || '';
	width.value = w || '';
	height.value = h || '';
	visible.value = true;

	return new Promise(resolve => { showReslove = resolve })
}

function watchBigImg() {
	cancel();

	const url = base64ToUrl(src.value);
	if (url) window.open(url, '_blank')
}

function cancel() {
	visible.value = false;
	showReslove({ type: 'cancel', data: null })
}

function isNumeric(str) {
	return /^\d+$/.test(str);
}

function confirm() {
	visible.value = false;
	let w = width.value.trim();
	let h = height.value.trim();
	if (isNumeric(w)) w += 'px';
	if (isNumeric(h)) h += 'px';
	showReslove({ type: 'confirm', data: { width: w, height: h, src: src.value, } })
}

defineExpose({
	show
})
</script>

<style lang="scss">
@import '../img-set-panel.scss';
</style>
